<template>
  <div class="education-quick-settings">
    <div class="item">
      <span class="label">学科</span>
      <d-select v-model="store.subject" style="width: 160px">
        <d-option value="数学">数学</d-option>
        <d-option value="英语">英语</d-option>
        <d-option value="计算机">计算机</d-option>
        <d-option value="网络">网络</d-option>
      </d-select>
    </div>
    <div class="item">
      <span class="label">学习主题</span>
      <d-input v-model="newTopic" style="width: 220px" placeholder="输入主题后回车" @keyup.enter="addTopic" />
      <div class="chips">
        <span v-for="(t, i) in store.topics" :key="i" class="chip" @click="removeTopic(i)">{{ t }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">模式</span>
      <d-radio-group v-model="store.practiceMode">
        <d-radio value="qa">答疑</d-radio>
        <d-radio value="trainer">陪练</d-radio>
      </d-radio-group>
    </div>
    <div class="item">
      <span class="label">难度</span>
      <d-radio-group v-model="store.difficulty">
        <d-radio :value="1">入门</d-radio>
        <d-radio :value="2">进阶</d-radio>
        <d-radio :value="3">挑战</d-radio>
      </d-radio-group>
    </div>
    <div class="item">
      <span class="label">学习目标</span>
      <d-input v-model="store.studyGoal" style="width: 320px" />
    </div>
    <div class="actions">
      <d-button variant="solid" color="primary" @click="startPlan">生成学习计划</d-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useChatMessageStore, useChatStatusStore } from '@/store';
const store = useChatStatusStore();
const msgStore = useChatMessageStore();
const newTopic = ref('');

const addTopic = () => {
  const v = newTopic.value.trim();
  if (!v) return;
  store.topics.push(v);
  newTopic.value = '';
};

const removeTopic = (i: number) => {
  store.topics.splice(i, 1);
};

const startPlan = () => {
  const subject = store.subject;
  const topics = store.topics.join('、');
  const goal = store.studyGoal;
  const diff = store.difficulty;
  const mode = store.practiceMode === 'trainer' ? '技能陪练' : '答疑';
  msgStore.ask(`请根据学科「${subject}」、主题「${topics}」、目标「${goal}」、难度等级${diff}、模式「${mode}」生成一份3-5步的学习计划，并给出每步练习建议与对应知识点。`);
};
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.education-quick-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  width: 100%;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 0;
}

.item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  width: 72px;
  color: $devui-text;
}

.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 10px;
  border-radius: 999px;
  background-color: $devui-dividing-line;
  color: $devui-aide-text;
  cursor: pointer;
}

.actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}
</style>